<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [
        ["menus", "dashboard"],
        ["menus", "data"],
        ["menus", "user"],
        ["menus", "user", "user1"],
        ["menus", "user", "user2"],
        ["menus", "us"],
        ["menus", "us", "user2"],
      ];
      function getIArr(arr, i) {
        return arr.map((item) => item[i]);
      }

      function handleRoute(arr, i = 0) {
        return [...new Set(getIArr(arr, i))].map((item) => {
          let router;
          if (item) {
            router = { path: item };
          }
          let level = i + 1;
          const children = arr.filter(
            (ee) => ee[i] == item && ee[level] != null
          );
          console.log(";;;;", children);
          if (children.length) {
            router.children = handleRoute(children, level, router.path);
          }
          return router;
        });
      }
      console.log(handleRoute(arr));
    </script>
  </body>
</html>
